<template>
    <div class="dashboard-editor-container">
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <h2>欢迎来到教学管理系统</h2>
      </el-row>
  
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <h3>课程列表</h3>
            <el-table :data="courses" style="width: 100%">
                <el-table-column label="课程名称" align="center" prop="courseName" />
                <el-table-column label="授课教师" align="center" prop="createBy" />
                <el-table-column label="课程状态" align="center" prop="status" :formatter="statusFormat" />
            </el-table>
            <el-button  @click="toggleShowAllCourses">更多...</el-button>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <h3>学生信息</h3>
            <el-table :data="this.students" style="width: 100%">
              <el-table-column prop="nickName" label="姓名"></el-table-column>
              <el-table-column prop="dept.deptName" label="班级"></el-table-column>
            </el-table>
            <el-button type="text" @click="toggleShowAllStudents">更多...</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import {
  listStudent,
} from "@/api/system/user";
import { listCourse, getCourse, delCourse, addCourse, updateCourse, exportCourse,th,selCourse } from "@/api/system/course/course";
  export default {
    name: 'Index',
    data() {
      return {
        courses: [],
              // 状态字典
      statusOptions: [],
        students: [],
        showAllCourses: false,
        showAllStudents: false,
        queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        nickName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
        },
        queryParams2: {
        pageNum: 1,
        pageSize: 10,
        createTime: null,
        courseName: null,
        createBy: null,
        status: null
      },
         // 日期范围
        dateRange: []
      }
    },
    computed: {
      displayedCourses() {
        return this.showAllCourses ? this.courses : this.courses.slice(0, 10);
      },
      displayedStudents() {
        return this.showAllStudents ? this.students : this.students.slice(0, 10);
      }
    },
    created() {
      // WebSocket 连接逻辑可以保留
      this.getStudentList();
      this.getCourseList();
      this.getDicts("course_status").then(response => {
      this.statusOptions = response.data;
      // console.info(this.statusOptions)
    });
    },
    methods: {
        getStudentList(){
        this.loading = true;
        listStudent(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.students = response.rows;
        this.loading = false;
        }
      );
        },

        /** 查询课程列表 */
    getCourseList() {
      this.loading = true;
      listCourse(this.queryParams2).then(response => {
        this.courses = response.rows;
        this.loading = false;
      });
    },
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
      toggleShowAllCourses() {
        this.$router.push("/course/list")
      },
      toggleShowAllStudents() {
        // this.showAllStudents = !this.showAllStudents;
        this.$router.push("/student")
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  
    .el-button {
      margin-top: 10px;
    }
  }
  
  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>
  
  
  
  